<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="司德超的在线简历 - Java开发工程师">
    <title>司德超 - Java开发工程师简历</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Roboto:wght@300;400;500;700&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">  
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="print-btn" title="打印简历" onclick="window.print()">
        <i class="fas fa-print fa-lg"></i>
    </div>


    <!-- 新增导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="navbar-logo">
                <i class="fas fa-user-tie"></i>
                <span>司德超简历</span>
            </a>
            <button class="mobile-menu-btn" id="mobileMenuBtn">
                <i class="fas fa-bars"></i>
            </button>
            <ul class="navbar-menu" id="navbarMenu">
                <li class="navbar-item"><a href="#profile" class="active"><i class="fas fa-user"></i> 个人简介</a></li>
                <li class="navbar-item"><a href="#education"><i class="fas fa-graduation-cap"></i> 教育背景</a></li>
                <li class="navbar-item"><a href="#skills"><i class="fas fa-laptop-code"></i> 技术能力</a></li>
                <li class="navbar-item"><a href="#projects"><i class="fas fa-project-diagram"></i> 项目经验</a></li>
                <li class="navbar-item"><a href="#awards"><i class="fas fa-award"></i> 荣誉奖项</a></li>
                <li class="navbar-item"><a href="#evaluation"><i class="fas fa-user-edit"></i> 自我评价</a></li>
            </ul>
        </div>
    </nav>

    <div class="container">
        <header id="home">
            <div class="profile">
                <img src="1.jpg" alt="司德超照片" class="profile-img">
                <div class="profile-text">
                    <h1>司德超</h1>
                    <p>Java全栈开发工程师</p>
                    <span class="tagline">用代码构建未来</span>
                </div>
            </div>
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fas fa-phone-alt"></i>
                    <a href="tel:18976902889">189-7690-2889</a>
                </div>
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <a href="mailto:qq@2098020016">qq@2098020016</a>
                </div>
                <div class="contact-item">
                    <i class="fas fa-map-marker-alt"></i>
                    <span>海南海口</span>
                </div>
            </div>
        </header>

        <section class="section" id="profile">
            <h2><i class="fas fa-user-tie"></i> 个人简介</h2>
            <div class="content">
                <p>专注于Java后端开发的应届毕业生，具备扎实的编程基础和良好的系统设计能力。熟悉Spring生态体系，对微服务架构有深入理解。热爱技术钻研，持续关注行业最新动态，具有良好的团队协作能力和问题解决能力。
                </p>
                <div class="skills" style="margin-top: 20px;">
                    <div class="skill"><i class="fab fa-java"></i> Java</div>
                    <div class="skill"><i class="fas fa-leaf"></i> Spring Boot</div>
                    <div class="skill"><i class="fas fa-database"></i> MySQL</div>
                    <div class="skill"><i class="fab fa-git-alt"></i> Git</div>
                    <div class="skill"><i class="fas fa-server"></i> Linux</div>
                </div>
            </div>
        </section>

        <section class="section" id="education">
            <h2><i class="fas fa-graduation-cap"></i> 教育背景</h2>
            <div class="timeline">
                <div class="timeline-item">
                    <div class="timeline-header">
                        <div class="timeline-title">海南经贸职业技术学院 - 软件技术专业</div>
                        <div class="timeline-date">2023.09 - 2026.06</div>
                    </div>
                    <div class="timeline-content">
                        <p>GPA: 3.8/4.0 | 专业排名: 前10%</p>
                        <p>主修课程: Java高级编程、数据库系统原理、Web应用开发、数据结构与算法、软件工程、分布式系统</p>
                    </div>
                </div>
            </div>
        </section>

        <section class="section" id="skills">
            <h2><i class="fas fa-laptop-code"></i> 技术能力</h2>
            <div class="content">
                <div class="progress-container">
                    <div class="progress-label">
                        <span>Java核心开发</span>
                        <span>90%</span>
                    </div>
                    <div class="progress-bar" style="width: 90%;">
                        <span class="progress-percent">90%</span>
                    </div>
                </div>

                <div class="progress-container">
                    <div class="progress-label">
                        <span>前端开发(HTML/CSS/JS)</span>
                        <span>85%</span>
                    </div>
                    <div class="progress-bar" style="width: 85%;">
                        <span class="progress-percent">85%</span>
                    </div>
                </div>

                <div class="progress-container">
                    <div class="progress-label">
                        <span>MySQL数据库</span>
                        <span>80%</span>
                    </div>
                    <div class="progress-bar" style="width: 80%;">
                        <span class="progress-percent">80%</span>
                    </div>
                </div>

                <div class="progress-container">
                    <div class="progress-label">
                        <span>Spring Boot框架</span>
                        <span>75%</span>
                    </div>
                    <div class="progress-bar" style="width: 75%;">
                        <span class="progress-percent">75%</span>
                    </div>
                </div>

                <div class="progress-container">
                    <div class="progress-label">
                        <span>Linux服务器管理</span>
                        <span>70%</span>
                    </div>
                    <div class="progress-bar" style="width: 70%;">
                        <span class="progress-percent">70%</span>
                    </div>
                </div>

                <h3 style="margin-top: 25px;">其他技能</h3>
                <div class="skills">
                    <div class="skill"><i class="fas fa-code-branch"></i> Git版本控制</div>
                    <div class="skill"><i class="fas fa-cube"></i> Maven</div>
                    <div class="skill"><i class="fas fa-shield-alt"></i> Spring Security</div>
                    <div class="skill"><i class="fas fa-rocket"></i> RESTful API</div>
                    <div class="skill"><i class="fas fa-tasks"></i> 单元测试</div>
                    <div class="skill"><i class="fas fa-book"></i> 技术文档编写</div>
                </div>
            </div>
        </section>

        <section class="section" id="projects">
            <h2><i class="fas fa-project-diagram"></i> 项目经验</h2>
            <div class="content">
                <div class="project">
                    <div class="project-header">
                        <h3 class="project-title">学生信息管理系统</h3>
                        <div class="project-date">2024.11 - 2024.12</div>
                    </div>
                    <div class="project-description">
                        <p>一个基于Spring Boot和Vue.js的全栈Web应用，实现了学生信息管理、课程管理、成绩统计等功能模块。系统采用前后端分离架构。</p>
                    </div>
                    <div class="project-tech">
                        <span class="tech-tag">Spring Boot</span>
                        <span class="tech-tag">MyBatis-Plus</span>
                        <span class="tech-tag">MySQL</span>
                        <span class="tech-tag">Vue.js</span>
                        <span class="tech-tag">Element UI</span>
                    </div>
                    <p><strong>技术亮点:</strong></p>
                    <ul>
                        <li>采用RBAC权限模型，使用Spring Security实现细粒度的权限控制</li>
                        <li>使用MyBatis-Plus简化数据库操作，提高开发效率</li>
                        <li>实现Excel导入导出功能，方便批量处理学生数据</li>
                        <li>使用Redis缓存热点数据，提升系统响应速度</li>
                        <li>采用JWT实现无状态认证，增强系统安全性</li>
                    </ul>
                    <p><strong>项目成果:</strong> 系统稳定运行4个月</p>
                </div>
            </div>
        </section>

        <section class="section" id="awards">
            <h2><i class="fas fa-award"></i> 荣誉奖项</h2>
            <div class="content">
                <ul>
                    <li>2022年校级编程大赛一等奖 (并非)</li>
                    <li>2021年国家励志奖学金 (并非)</li>
                    <li>2020年"互联网+"大学生创新创业大赛校级铜奖(并非)</li>
                </ul>
            </div>
        </section>

        <section class="section" id="evaluation">
            <h2><i class="fas fa-user-edit"></i> 自我评价</h2>
            <div class="content">
                <p>作为一名热爱技术的Java开发者，我始终保持对新技术的好奇心和学习的热情。在校期间通过多个项目积累了全栈开发经验。善于在团队中沟通协作，能够快速适应新技术环境。</p>
                <p>我的职业目标是成为一名精通Java生态系统的架构师。我相信持续学习和实践是技术成长的关键，期待能在实际工作中不断挑战自我，创造价值。</p>
            </div>
        </section>

        <footer>
            <p>© 2024 司德超 - 个人简历</p>
            <p style="margin-top: 15px;">最后更新: 2024年3月</p>
        </footer>
    </div>

    <script>
        // 导航栏滚动效果
        document.addEventListener('DOMContentLoaded', function () {
            const navbarMenu = document.getElementById('navbarMenu');
            const mobileMenuBtn = document.getElementById('mobileMenuBtn');
            const navLinks = document.querySelectorAll('.navbar-item a');

            // 移动端菜单切换
            mobileMenuBtn.addEventListener('click', function () {
                navbarMenu.classList.toggle('active');
            });

            // 点击导航链接后关闭移动菜单
            navLinks.forEach(link => {
                link.addEventListener('click', function () {
                    navbarMenu.classList.remove('active');

                    // 更新活动链接样式
                    navLinks.forEach(item => item.classList.remove('active'));
                    this.classList.add('active');
                });
            });

            // 滚动时更新活动链接
            window.addEventListener('scroll', function () {
                const scrollPosition = window.scrollY;

                document.querySelectorAll('.section').forEach(section => {
                    const sectionTop = section.offsetTop - 100;
                    const sectionHeight = section.offsetHeight;
                    const sectionId = section.getAttribute('id');

                    if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                        navLinks.forEach(link => {
                            link.classList.remove('active');
                            if (link.getAttribute('href') === `#${sectionId}`) {
                                link.classList.add('active');
                            }
                        });
                    }
                });
            });

            // 平滑滚动
            navLinks.forEach(link => {
                link.addEventListener('click', function (e) {
                    e.preventDefault();

                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);

                    window.scrollTo({
                        top: targetElement.offsetTop - 70,
                        behavior: 'smooth'
                    });
                });
            });
        });

        // 打印前优化
        function beforePrint() {
            // 可以在这里添加打印前的处理逻辑
            console.log('准备打印简历...');
        }
        
        function afterPrint() {
            console.log('打印完成或取消');
        }
        
        // 添加打印事件监听
        window.addEventListener('beforeprint', beforePrint);
        window.addEventListener('afterprint', afterPrint);
    </script>
</body>

</html>